<template>
	<view>
		<view class="wrapper">
			<!-- <view class="handRight">
				画板
			</view> -->
			
			
			<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
			</view>

			<view class="handBtn">
				<view class="" style="position: relative;">
					<image @click="showColor" src="/static/colorPalette.png"
				class="black-select" :style="{border:`calc(10vmin / 7.5) solid ${lineColor}`}"></image>
					<view  class="colourCard" v-if="colourShow">
					        <colour @setColor="setColor"/>
					</view>
				</view>
				
<!-- 				<image @click="selectColorEvent('red','#ca262a')" src="/static/other/color_red.png"
					:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image> -->

				<image @click="selectColorEvent('white','#FFFFFF')"
					:src="`/static/other/${selectColor === 'white'?'eliminate_':'eliminate'}.png`"
					:class="[selectColor === 'white' ? 'eliminate' : '', 'black-select']"></image>
				<view class="size">
					<text>粗细：</text>
					<u-slider v-model="lineSize" min="1" max="20" style="flex:1"></u-slider>
					<text>{{lineSize}}</text>
				</view>

				<view class="xwj">
					<view @click="retDraw" class="delBtn">重写</view>
					<view @click="saveCanvasAsImg" class="saveBtn">保存</view>
					<view @click="previewCanvasImg" class="previewBtn">预览</view>
				</view>

				<view class="subBtn">

					<view @click="subCanvas">完成</view>
					<view style="margin-right: calc(30vmin / 7.5);" @click="navBack">取消</view>
				</view>
			</view>
      
			

					

		</view>
	</view>
</template>

<script>
	import colour from '@/components/colour/colour.vue'
	export default {
		components: {
		    colour
		},
		data() {
			return {
				canvasName: 'handWriting',
				show:false,
				onlineId: '',
				user_id_s:'',
				colourShow:false,
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
			};
		},
		onLoad(e) {
			setTimeout(()=>{
				this.show=true
			},4000)
			console.log(e)
			this.onlineId = e.onlineId
			this.user_id_s=e.user_id_s
			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});
		},
		methods: {
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			showColor(){
				this.colourShow=!this.colourShow
			},
			setColor(e){
				let text=`rgb(${e[0]},${e[1]},${e[2]})`
				this.selectColorEvent(text)
			},
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				this.colourShow=false
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要清空画板吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.ctx.clearRect(0, 0, 700, 730);
							that.ctx.draw();
							//设置canvas背景
							that.setCanvasBg('#fff');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

			/**
			 * @param {Object} str
			 * @param {Object} color
			 * 选择颜色
			 */
			selectColorEvent(color) {
				// this.selectColor = str;
				this.lineColor = color;
			},
			//完成
			subCanvas() {
				let that = this
				uni.showLoading({
					title: '上传中'
				});
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						that.$uploadFiles({
							filePath: res.tempFilePath
						}).then(res => {
							that.$myRuquest('home/online/online_do', {
								online_id: that.onlineId,
								user_id_s:that.user_id_s,
								docx: res.data
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
								let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
								 
								let prevPage = pages[ pages.length - 2 ]; 
								 console.log(prevPage)
								setTimeout(() => {
									
									uni.redirectTo({
										url: '/pages/challengeList/challengeing/challengeing?onlineId='+that.onlineId+'&user_id_s='+uni.getStorageSync("userData").id
									})
								}, 1500)

							})
						})
					},
					fail() {
						uni.showToast({
							title: '上传失败',
							icon: "none"
						})
						uni.hideLoading();
					}
				});
			},
			//保存到相册
			saveCanvasAsImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {

				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}
.colourCard{
	position: absolute;
	bottom: calc(130vmin / 7.5);
	left: calc(40vmin / 7.5);
	width:calc(300vmin / 7.5);
	height:calc(300vmin / 7.5);
	background-color: #fff;
	padding: calc(20vmin / 7.5);
	border-radius: calc(12vmin / 7.5);
	box-shadow: 0 0 calc(10vmin / 7.5) #ccc;
}
	.wrapper {
		width: 100%;
		height: calc(100vh - calc(60vmin / 7.5));
		margin: calc(30vmin / 7.5) 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: column;
		justify-content: center;
		font-size: calc(28vmin / 7.5);
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 100%;
	}

	.handRight {
		align-items: center;
		text-align: center;
		color: #666666;
		font-size: calc(28vmin / 7.5);
	}

	.handCenter {
		border: calc(4vmin / 7.5) dashed #e9e9e9;
		flex: 7;
		margin: 0 calc(20vmin / 7.5);
		overflow: hidden;
		box-sizing: border-box;
	}

	.handBtn button {
		font-size: calc(28vmin / 7.5);
	}

	.handBtn {
		height: calc(30vmin / 7.5);
		padding: 0 calc(40vmin / 7.5);
		margin-top: calc(20vmin / 7.5);
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn,
	.saveBtn,
	.previewBtn {
		width: calc(120vmin / 7.5);
		height: calc(70vmin / 7.5);
		line-height: calc(70vmin / 7.5);
		font-size: calc(28vmin / 7.5);
		border: calc(2vmin / 7.5) solid #666;
		text-align: center;
		color: #666;
		border-radius: calc(8vmin / 7.5);
	}

	.subBtn {
		flex: 1;
		margin-left: calc(20vmin / 7.5);
		display: flex;
		flex-direction: row-reverse;

		view {
			background: #008ef6;
			color: #fff;
			height: calc(70vmin / 7.5);
			line-height: calc(70vmin / 7.5);
			width: calc(160vmin / 7.5);
			border-radius: calc(12vmin / 7.5);
			text-align: center;
			align-items: center;
		}
	}



	.uploadBtn {
		position: absolute;
		top: calc(625vmin / 7.5);
		left: 0rpx;
		color: #666;
	}

	/*Peach - 新增 - 保存*/

	.black-select {
		width: calc(60vmin / 7.5);
		height: calc(60vmin / 7.5);
		border: calc(10vmin / 7.5) solid #FAFAFA;
		margin-right: calc(20vmin / 7.5);
		border-radius: 50%;
	}



	.red-select {
		width: calc(60vmin / 7.5);
		height: calc(60vmin / 7.5);
	}

	.red-select.color_select {
		width: calc(90vmin / 7.5);
		height: calc(90vmin / 7.5);
	}

	.xwj {
		display: flex;
		justify-content: space-around;
		flex: 3;
		margin-left: calc(50vmin / 7.5);
	}

	.eliminate {
		transform: scale(1.1);
	}

	.size {
		width: calc(400vmin / 7.5);
		display: flex;
		line-height: calc(70vmin / 7.5);

		.u-slider {
			flex: 1;
		}
	}
</style>
